// import { FloatingMenu } from '@tiptap/react'
import FloatingMenu from '@/pages/docs/_extensions/floating-handler';
import { useEditorStore } from '@/store/useEditorZustand';
import { Button } from 'antd';
// import { posToDOMRect } from '@tiptap/core';
import { HandCoins } from 'lucide-react';
const TextMenu = () => {
  const { editor } = useEditorStore();

  // const getReferenceClientRect = function () {
  //   const view = editor.view;
  //   const { state } = view;

  //   const { doc, selection } = state;
  //   const { from, to } = selection;

  //   const rectPos = posToDOMRect(view, from, to); // 这里的from和to是光标位置，所以会返回光标位置的rectangl
  //   const withoutToPos = posToDOMRect(view, from);
  //   const mergePos = { ...rectPos, width: 0, left: withoutToPos.left, right: withoutToPos.left };
  //   return mergePos;
  // };
  return (
    <FloatingMenu
      tippyOptions={{
        trigger: 'mouseover',
        duration: 100,
        animation: 'fade',
        placement: 'right',
        // getReferenceClientRect,
        popperOptions: {
          modifiers: [
            {
              name: 'preventOverflow',
              options: {
                boundary: 'viewport',
                padding: 8,
              },
            },
            {
              name: 'flip',
              options: {
                fallbackPlacements: ['bottom-start', 'top-end', 'bottom-end'],
              },
            },
          ],
        },
        maxWidth: 'calc(100vw - 16px)',
      }}
      pluginKey="float-menu"
      editor={editor}
    >
      <Button icon={<HandCoins className="size-4" />} type="text" />
    </FloatingMenu>
  );
};

export default TextMenu;
